<INPUT> | NN all IE all HTML all | ||||
<INPUT> | End Tag: Forbidden | ||||
An INPUT element is sometimes known as a form control, although not all INPUT elements are visible on the page. For the most part, an INPUT element provides a place for users to enter text, click buttons, and make selections from lists. The data gathered from this interaction can be submitted to a server-side program (when the surrounding FORM element is submitted), or it may be used strictly on the client as a way for users to interact with client-side scripts. Prior to HTML 4.0, INPUT elements were supposed to be wrapped by a FORM element in all instances. This restriction is loosening up, but Navigator 4 still requires the FORM wrapper in order to render INPUT elements. The primary attribute that determines the kind of control that is displayed on the page is the TYPE attribute. This attribute can have one of the following values: button, checkbox, file, hidden, image, password, radio, reset, submit, or text. Not all INPUT element types utilize the full range of other attributes; sometimes a single attribute has different powers with different element types. For each attribute of the INPUT element, the listing specifies the types to which it applies. Although the TEXTAREA element has its own tag, it is often treated like another form control. | |||||
Example
<FORM METHOD=post ACTION="http://www.giantco.com/cgi-bin/query"> First Name: <INPUT TYPE="text" NAME="first" MAXLENGTH=15><BR> Last Name: <INPUT TYPE="text" NAME="last" MAXLENGTH=25><BR> ZIP Code: <INPUT TYPE="text" NAME="zip" MAXLENGTH=10><BR> <INPUT TYPE="reset"> <INPUT TYPE="submit"> </FORM> | |||||
Object Model Reference
|
ACCEPT | NN n/a IE n/a HTML 4 | ||
ACCEPT=" | Optional | ||
Specifies one or more MIME types for allowable files to be uploaded to the server when the form is submitted. The predicted implementation of this attribute would filter the file types listed in file dialogs used to select files for uploading. In a way, this attribute provides client-side validation of a file type so that files not conforming to the permitted MIME type is not even sent to the server. The HTML 4.0 specification also has this attribute available in the FORM element. It is unclear whether the implementations in browsers will recognize this attribute in both places. | |||
| |||
Example
<INPUT TYPE="file" ACCEPT="text/html, image/gif" ...> | |||
Value Case-insensitive MIME type (content type) value. For multiple items, a comma-delimited list is allowed. | |||
|
ACCESSKEY | NN n/a IE 4 HTML 4 | ||
ACCESSKEY=" | Optional | ||
A single character key that brings focus to the input element. The
browser and operating system determine if the user must press a
modifier key (e.g., | |||
| |||
Example
<INPUT TYPE="text" NAME="first" MAXLENGTH=15 ACCESSKEY="f"><BR> | |||
Value Single character of the document set. | |||
| |||
Object Model Reference
|
ALIGN | NN all IE all HTML 3.2 | ||
ALIGN=" | Optional | ||
Determines how the rectangle of the input image aligns within the context of the surrounding content. See the section "Alignment Constants" earlier in this chapter for a description of the possibilities defined in both Navigator and Internet Explorer for this attribute. Not all attribute values are valid in browsers prior to the Version 4 releases. Both browsers follow the same rules on laying out content surrounding an image whose ALIGN attribute is set, but the actual results are sometimes difficult to predict when the surrounding content is complex. A thorough testing of rendering possibilities with browser windows set to various sizes prevents surprises later. | |||
| |||
Example
<INPUT TYPE="image" NAME="icon" SRC="icon.gif" ALIGN="absmiddle"> | |||
Value Case-insensitive constant value. All constant values are available in Navigator 4 and Internet Explorer 4. | |||
| |||
Object Model Reference
|
ALT | NN n/a IE 4 HTML 4 | ||
ALT=" | Optional | ||
If a browser is not capable of displaying graphical images (or has the feature turned off), the text assigned to the ALT attribute is supposed to display in the document where the image INPUT element's tag appears. Typically, this text provides advice on what the page visitor is missing by not being able to view the image. | |||
| |||
Example
<INPUT TYPE="image" NAME="icon" SRC="sndIcon.gif" ALT="Sound Icon"> | |||
Value Any quoted string of characters. | |||
| |||
Object Model Reference
|
BORDER | NN 4 IE 4 HTML n/a | ||
BORDER= | Optional | ||
Navigator and Internet Explorer treat images displayed by the INPUT element very much like IMG elements. As such, you can specify a border around the image. Navigator displays one by default. Because an INPUT element whose TYPE attribute is "image" acts as a submit-style button, the border is rendered in the browser's link colors. If you want a different color for a plain border, use style sheets (with the appropriate DIV or SPAN wrapper for Navigator 4). You can eliminate the colored border altogether in Navigator by setting the BORDER attribute size to zero. | |||
| |||
Example
<INPUT TYPE="image" NAME="icon" SRC="sndIcon.gif" BORDER=0> | |||
Value Any integer pixel value. | |||
| |||
Object Model Reference
|
CHECKED | NN 4 IE 3 HTML 4 | ||||
CHECKED | Optional | ||||
A Boolean attribute that designates whether the current checkbox or radio INPUT element is turned on when the page loads. In the case of a radio button grouping, only one INPUT element should have the CHECKED attribute. Scripts can modify the internal value of this attribute after the page has loaded. When the form is submitted, an INPUT element whose CHECKED attribute is turned on sends its name/value pair as part of the form data. The name/value pair consists of values assigned to the NAME and VALUE attributes for the element. If no value is assigned to the VALUE attribute, the string value "active" is automatically assigned when the checkbox or radio button is highlighted. This is fine for checkboxes because each one should be uniquely named. However, all radio buttons in a related group must have the same name, so this default behavior doesn't provide enough information for most server-side programs to work with. | |||||
| |||||
Example
<INPUT TYPE="checkbox" NAME="addToList" CHECKED>Send email updates to this web site. | |||||
Value The presence of this attribute turns on its property. | |||||
| |||||
Object Model Reference
|
DATAFLD | NN n/a IE 4 HTML n/a | ||
DATAFLD=" | Optional | ||
Used with IE 4 data binding to associate a remote data source column name with parts of various INPUT elements. A DATASRC attribute must also be set for the element. | |||
| |||
Example
<INPUT TYPE="text" NAME="first" DATASRC="#DBSRC3" DATAFLD="firstName"> | |||
Value Case-sensitive identifier. | |||
| |||
Object Model Reference
|
DATASRC | NN n/a IE 4 HTML n/a | ||
DATASRC=" | Optional | ||
Used with IE 4 data binding to specify the name of the remote ODBC data source (such as an Oracle or SQL Server database) to be associated with the element. Content from the data source is specified via the DATAFLD attribute. | |||
| |||
Example
<INPUT TYPE="text" NAME="first" DATASRC="#DBSRC3" DATAFLD="firstName"> | |||
Value Case-sensitive identifier. | |||
| |||
Object Model Reference
|
DISABLED | NN n/a IE 4 HTML 4 | ||
DISABLED | Optional | ||
A disabled INPUT element appears grayed out on the screen and cannot be activated by the user. In Windows, a disabled form control cannot receive focus and does not become active within the tabbing order rotation. HTML 4.0 also specifies that the name/value pair of a disabled INPUT element should not be sent when the form is submitted. INPUT elements that normally perform submissions do not submit their form when disabled. The DISABLED attribute is a Boolean type, which
means that its presence in the attribute sets its value to
true. Its value can also be adjusted after the
fact by scripting (see the button object in | |||
| |||
Example
<BUTTON TYPE="submit" DISABLED>Ready to Submit </BUTTON> | |||
Value The presence of the attribute disables the element. | |||
| |||
Object Model Reference
|
ID | NN n/a IE 4 HTML 4 | ||
ID=" | Optional | ||
A unique identifier that distinguishes this element from all the rest in the document. Can be used to associate a single element with a style rule naming this attribute value as an ID selector. Do not confuse the ID attribute with the NAME attribute, whose value is submitted as part of a name/value pair with the form. | |||
| |||
Example
<INPUT TYPE="button" ID="next" VALUE=">>Next>>" onClick="goNext(3)"> | |||
Value Case-sensitive identifier. | |||
| |||
Object Model Reference
|
MAXLENGTH | NN all IE all HTML all | ||
MAXLENGTH=" | Optional | ||
Defines the maximum number of characters that may be typed into a text field INPUT element. In practice, browsers beep or otherwise alert users when a typed character would exceed the MAXLENGTH value. There is no innate correlation between the MAXLENGTH and SIZE attributes. If the MAXLENGTH allows for more characters than fit within the specified width of the element, the browser provides horizontal scrolling (albeit awkward for many users) to allow entry and editing of the field. | |||
| |||
Example
<INPUT TYPE="text" NAME="ZIP" MAXLENGTH=10> | |||
Value Positive integer. | |||
| |||
Object Model Reference
|
NAME | NN all IE all HTML all | ||||
NAME=" | Optional | ||||
If the INPUT element is part of a form being submitted to a server, the NAME attribute is required if the value of the element is to be submitted with the form. For forms that are in documents for the convenience of scripted form elements, INPUT element names are not required but are helpful just the same in creating scripted references to these objects and their properties or methods. | |||||
| |||||
Example
<INPUT TYPE="text" NAME="ZIP" MAXLENGTH=10> | |||||
Value Case-sensitive identifier. | |||||
| |||||
Object Model Reference
|
READONLY | NN n/a IE 4 HTML 4 | ||
READONLY | Optional | ||
When the READONLY attribute is present, the text field INPUT element cannot be edited on the page by the user (although scripts can modify the content). A field marked as READONLY should not receive focus within the tabbing order (although IE 4 for the Macintosh allows the field to receive focus). | |||
| |||
Example
<INPUT TYPE="text" NAME="ZIP" READONLY> | |||
Value The presence of the attribute sets its value to true. | |||
| |||
Object Model Reference
|
SIZE | NN all IE all HTML all | ||
SIZE=" | Optional | ||
In practice, the SIZE attribute is limited to describing the character width of text field INPUT elements. The actual rendered width is calculated based on the font setting (or default font) for the element, but the results are not always perfect. Variations in font rendering (and the ability to specify alternate font faces and sizes in Internet Explorer) sometimes lead to unexpectedly narrower fields. Therefore, it is not wise to automatically set the SIZE and MAXLENGTH attributes to the same value without testing the results on a wide variety of browsers and operating systems with worst-case data (for example, all "m" or "W" characters in proportional fonts). The HTML 4.0 specification indicates that the SIZE attribute might be applied to other INPUT element types, but as of the Version 4 browsers, this is not the case. In the meantime, you can use CSS-Positioning to make buttons wider than the default size that tracks the width of the VALUE attribute string. | |||
| |||
Example
<INPUT TYPE="text" NAME="ZIP" MAXLENGTH=10 SIZE=12> | |||
Value Any positive integer. | |||
| |||
Object Model Reference
|
SRC | NN all IE all HTML all | ||
SRC=" | Required | ||
URL to a file containing image data that is displayed through the INPUT element of type image. The browser must be equipped to handle the image MIME type. On the World Wide Web, the most common image formats are GIF and JPEG. | |||
| |||
Example
<INPUT TYPE="image" NAME="icon" SRC="sndIcon.gif" BORDER=0> | |||
Value A complete or relative URL. | |||
| |||
Object Model Reference
|
TABINDEX | NN n/a IE 3 HTML 4 | ||
TABINDEX= | Optional | ||
A number that indicates the sequence of this element within the tabbing order of all focusable elements in the document. Tabbing order follows a strict set of rules. Elements that have values other than zero assigned to their TABINDEX attributes are first in line when a user starts tabbing in a page. Focus starts with the element with the lowest TABINDEX value and proceeds in order to the highest value, regardless of physical location on the page or in the document. If two elements have the same TABINDEX values, the element that comes earlier in the document receives focus first. Next come all elements that either don't support the TABINDEX attribute or have the value set to zero. These elements receive focus in the order in which they appear in the document. Note that the Macintosh user interface does not provide for giving focus to elements other than text and password INPUT fields. | |||
| |||
Example
<INPUT TYPE="text" NAME="country" TABINDEX=3> | |||
Value Any integer from 0 through 32767. In IE 4, setting the TABINDEX to -1 causes the element to be skipped in tabbing order altogether. | |||
| |||
Object Model Reference
|
TYPE | NN all IE all HTML all | ||||||||||||||||||||||
TYPE=" | Required | ||||||||||||||||||||||
Advises the browser how to render the INPUT element (or even whether the element should be rendered at all). Possible choices are as follows:
| |||||||||||||||||||||||
Example
<INPUT TYPE="button" VALUE="Toggle Sound" onClick="toggleSnd()"> <INPUT TYPE="checkbox" NAME="connections" VALUE="ISDN">ISDN <INPUT TYPE="file" NAME="uploadFile"> <INPUT TYPE="hidden" NAME="prevState" VALUE="modify"> <INPUT TYPE="image" NAME="graphicSubmit" SRC="submit.jpg" HEIGHT=40 WIDTH=40> <INPUT TYPE="password" NAME="password" MAXLENGTH=12 SIZE=20> <INPUT TYPE="radio" NAME="creditCard" VALUE="Visa">Visa <INPUT TYPE="reset"> <INPUT TYPE="submit" VALUE="Send Encrypted"> Social Security Number:<INPUT TYPE="text"NAME="ssn" VALUE="###-##-####" onClick="validateSSN(this)"> | |||||||||||||||||||||||
Value Any one of the known INPUT element types: button | checkbox | file | hidden | image | password | radio | reset | submit | text. | |||||||||||||||||||||||
| |||||||||||||||||||||||
Object Model Reference
|
USEMAP | NN n/a IE n/a HTML 4 |
USEMAP=" | Optional |
The HTML 4.0 specification lists the USEMAP attribute for an INPUT element of type image. In the future, this might lead to a link between image INPUT elements and the scriptable powers of client-side image maps (such as rollovers), but for now, it is unknown for sure how this attribute will be implemented in browsers. |
VALUE | NN all IE all HTML all | ||||
VALUE=" | Optional/Required | ||||
Preassigns a value to an INPUT element that is submitted to the server as part of the name/value pair for the element. Some INPUT element types are not submitted (an unchecked radio button, for example), but any value you associate with all but the button or reset type INPUT element reaches the server when the element is submitted. In the case of text and password INPUT elements, the VALUE attribute contains a default entry. As the user makes a change to the content of the text field, the value changes, although the source code does not. When a form is reset (via a reset INPUT element), the default values are put back into the text fields. The VALUE attribute is required only for checkbox and radio INPUT elements. For INPUT elements that are rendered as standard clickable buttons, the VALUE attribute defines the label that appears on the button. | |||||
| |||||
Example
<INPUT TYPE="checkbox" NAME="connections" VALUE="ISDN">ISDN | |||||
Value Any text string. | |||||
| |||||
Object Model Reference
|